<!-- 输入框 -->
<template>
  <Input
    :class="`${$slots.cusappend ? 'cus-clear' : ''}`"
    v-model="computedVal"
    :placeholder="props.placeholder"
    :clearable="props.clearable"
    :size="props.size"
    v-bind="$attrs"
  >
    <Icon
      style="cursor: pointer"
      v-if="props.iconShow"
      :type="props.iconType"
      :slot="props.iconSlot"
      @click.native="onIconCick"
    />
  </Input>
</template>

<script lang="ts" setup>
import { computed } from '@vue/reactivity'
const emits = defineEmits(['update:modelValue', 'icon-click'])
const props = defineProps({
  modelValue: {
    type: String || Number,
    default: ''
  },
  size: {
    type: String,
    default: 'default'
  },
  placeholder: {
    type: String,
    default: '请输入'
  },
  iconShow: {
    type: Boolean,
    default: false
  },
  iconSlot: {
    type: String,
    default: 'suffix'
  },
  iconType: {
    type: String,
    default: 'ios-search'
  },
  clearable: {
    type: Boolean,
    default: true
  }
})

const computedVal = computed({
  get: () => props.modelValue,
  set: (val) => {
    emits('update:modelValue', val)
  }
})

const onIconCick = () => {
  emits('icon-click')
}
</script>

<style lang="less" scoped>
// 调整尾部存在复合型内容时，清除图标会重合样式
.cus-clear {
  /deep/.ivu-input-icon-clear {
    transform: translateX(-27px);
  }
}
</style>
